<template>
    <div class="testimonial-card">
        <!-- 评分区域 -->
        <div class="rating">
            <div class="stars">
                <span v-for="star in 5" :key="star" :class="{ filled: star <= testimonial.rating }">★</span>
            </div>
            <span class="rating-value">{{ testimonial.rating.toFixed(1) }}</span>
        </div>

        <!-- 评价内容 -->
        <p class="testimonial-text">"{{ testimonial.comment }}"</p>

        <!-- 用户信息 -->
        <div class="user-info">
            <div class="avatar" :style="{ backgroundImage: `url(${testimonial.avatar})` }"></div>
            <div class="user-details">
                <h4 class="user-name">{{ testimonial.name }}</h4>
                <p class="user-location" v-if="testimonial.location">{{ testimonial.location }}</p>
                <p class="travel-date" v-if="testimonial.travelDate">{{ testimonial.travelDate }} 旅行</p>
            </div>
        </div>

        <!-- 可选的照片展示 -->
        <div class="user-photos" v-if="testimonial.photos && testimonial.photos.length">
            <div class="photo-thumbnail" v-for="(photo, index) in testimonial.photos" :key="index"
                :style="{ backgroundImage: `url(${photo})` }" @click="openPhotoViewer(index)"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Testimonial',
        props: {
            testimonial: {
                type: Object,
                required: true,
                validator: value => {
                    return ['id', 'name', 'avatar', 'comment', 'rating'].every(key => key in value)
                }
            }
        },
        methods: {
            openPhotoViewer(index) {
                this.$emit('photo-click', {
                    index,
                    photos: this.testimonial.photos
                })
            }
        }
    }
</script>

<style scoped>
    :root {
        --primary-color: #4a6bff;
        --secondary-color: #ff7e5f;
        --dark-color: #2d3436;
        --light-color: #f5f6fa;
        --text-color: #636e72;
        --white: #ffffff;
        --border-radius: 12px;
        --transition: all 0.3s ease;
    }

    .testimonial-card {
        background: var(--white);
        border-radius: var(--border-radius);
        padding: 25px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        transition: var(--transition);
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .testimonial-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    /* 评分区域 */
    .rating {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .stars {
        font-size: 1.2rem;
        letter-spacing: 2px;
        margin-right: 10px;
    }

    .stars span {
        color: #e0e0e0;
        transition: var(--transition);
    }

    .stars .filled {
        color: #ffc107;
    }

    .rating-value {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--dark-color);
    }

    /* 评价内容 */
    .testimonial-text {
        font-size: 1rem;
        line-height: 1.6;
        color: var(--text-color);
        margin: 0 0 20px 0;
        font-style: italic;
        position: relative;
    }

    .testimonial-text::before,
    .testimonial-text::after {
        color: #dfe6e9;
        font-size: 1.5rem;
        font-family: serif;
        line-height: 1;
        position: absolute;
    }

    .testimonial-text::before {
        content: "“";
        top: -10px;
        left: -15px;
    }

    .testimonial-text::after {
        content: "”";
        bottom: -20px;
        right: -15px;
    }

    /* 用户信息 */
    .user-info {
        display: flex;
        align-items: center;
        margin-top: auto;
    }

    .avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        margin-right: 15px;
        border: 3px solid #f0f4ff;
    }

    .user-details {
        flex: 1;
    }

    .user-name {
        margin: 0 0 5px 0;
        font-size: 1rem;
        color: var(--dark-color);
    }

    .user-location,
    .travel-date {
        margin: 0;
        font-size: 0.8rem;
        color: var(--text-color);
    }

    .user-location {
        display: flex;
        align-items: center;
    }

    .user-location::before {
        content: "📍";
        margin-right: 5px;
    }

    .travel-date {
        font-size: 0.75rem;
        opacity: 0.8;
    }

    /* 用户照片 */
    .user-photos {
        display: flex;
        gap: 10px;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    .photo-thumbnail {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        background-size: cover;
        background-position: center;
        cursor: pointer;
        transition: var(--transition);
    }

    .photo-thumbnail:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .testimonial-card {
            padding: 20px;
        }

        .testimonial-text {
            font-size: 0.95rem;
        }

        .avatar {
            width: 50px;
            height: 50px;
        }

        .user-name {
            font-size: 0.95rem;
        }

        .photo-thumbnail {
            width: 50px;
            height: 50px;
        }
    }

    @media (max-width: 480px) {

        .testimonial-text::before,
        .testimonial-text::after {
            display: none;
        }
    }
</style>